<template>
    <GhNavBar title="安全中心"  />
   <div class="safeCenter">
    <!-- 账号 -->
    <div class="account">
        <h3>账号</h3>
        <van-cell title="修改登录密码" is-link  to="/updatePassword" > 
            <template #value>
            <p>安全等级：<span style="color: red;">中</span></p>
          </template>
        </van-cell>
        <van-cell title="修改手机号码" is-link  to="/updateAccount" >
           <template #value>
            <span>{{account}}</span>
          </template>
        </van-cell>
        <van-cell title="账号绑定管理" is-link  >
            <template #value>
                <span >绑定/解绑微信、QQ等账号</span>
              </template>
        </van-cell>
    </div>
    <!-- 安全 -->
    <div class="safe">
        <h3>安全</h3>
        <van-cell title="登录设备管理" is-link  > </van-cell>
        <van-cell title="账号客服" is-link  ></van-cell>
        <van-cell title="注销账号" is-link value="注销后无法恢复，请谨慎操作" ></van-cell>
    </div>
  </div>
</template>

<script setup>
import GhNavBar from '@/components/gh-nav-bar.vue'
import {ref,onMounted,reactive} from "vue"
const userInfoData = ref(JSON.parse(localStorage.getItem('gh-user')).user.userData)
// console.log(userInfoData.value.account)
const account=ref('')
 account.value=userInfoData.value.account
</script>

<style lang="scss" scoped>
.safeCenter{
    height: 100vh;
    padding-top: 48px;
    background-color:var(--gh-bg);
    border-radius: 8px;
      overflow: hidden;
        h3 {
        padding-left: 16px;
        line-height: 44px;
        border-color: gray;
      }
  
    
}


</style>
